<template>
  <el-card>
    <div class="cardContent">
      <div class="left">
        <slot name="icon"></slot>
      </div>
      <div class="right">
        <div :style="{fontSize: nameFontSize, color: nameColor, fontWeight: nameFontWeight ? 'bold' : 'normal'}">{{name}}</div>
        <div :style="{marginTop: '1rem', fontSize: fontSize, color: color, fontWeight: fontWeight ? 'bold' : 'normal'}">
          <CountUp
            :id="id"
            :endVal="value"
            useGrouping
            useEasing
          >
          </CountUp>
        </div>
      </div>
    </div>
  </el-card>
</template>

<script lang="ts">
  import {defineComponent} from 'vue'
  import CountUp from '@/components/countUp/CountUp.vue'
  export default defineComponent({
    name: "InfoCard",
    components:{
      CountUp
    },
    props:{
      name: String,
      id: {
        type: String,
        required: true
      },
      value: {
        type: Number,
        default: 0
      },
      nameFontSize: {
        type: String,
        default: '1.4rem'
      },
      nameColor: {
        type: String,
        default: '#999999'
      },
      nameFontWeight: Boolean,
      fontSize:{
        type: String,
        default: '3rem',
      },
      color: {
        type: String,
        default: '#333333'
      },
      fontWeight: Boolean
    }
  })
</script>

<style lang="scss" scoped>
  .cardContent{
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .left{
      width: 10rem;
      text-align: center;
    }
    .right{
      flex: 1;
      padding-left: 2rem;
      box-sizing: border-box;
    }
  }
</style>
